#include("/front/teacher/_layout.html")
#@layout()
#define layoutImportcss()
#end
#define layoutHead()
	<title>文章列表</title>
#end
#define layoutHome()

#include("inc_toolbar.html")

<div class="page-content childrearing-page-content infinite-scroll-content">
	<div class="navbar">
		<div class="navbar-inner toolbstyle">
			<div class="left">
				<a class="link back" href="javascript:history.back()">
					<i class="icon icon-back"></i>
				</a>
			</div>
			<div class="title" id="navbar_title"></div>
			<div class="right">
			</div>
		</div>
	</div>
	<div class="tabs">
		<div class="tab-content tab tab-active">
			<ul id="ul_list_articles">
			</ul>
		</div>
	</div>

	<!--加载gif图-->
	<div class="preloader infinite-scroll-preloader"></div>
</div>
#end
#define layoutImportjs()
#end
#define layoutScript()
<script type="text/javascript">
	var loading = false;
	var cur_pageNo = 1;
	var cur_pageCount = 1;
	var cat_id = getUrlParam("catid");
	
	// 监听滚动事件
	$$('.infinite-scroll-content').on('infinite', function () {
		if (loading) return;
	
		if (cur_pageNo>=cur_pageCount){
			return;
		}
	
		// Set loading flag
		loading = true;
	
	    getPage(cur_pageNo+1);
	});
	
	function getPage(pageNo){
		var surl = "/front/teacher/article/getPage?pageNo=" + pageNo + "&pageSize=" + global_pagesize+ "&typeid=1&catid="+cat_id + "&usestate=1";
		sendPost(surl, null, function(res){
			//console.log(res);
			loading = false;
			cur_pageNo = pageNo;

			if (res.pageData.list.length>0){
				
				cur_pageCount = res.pageData.totalPage;
				
				if (pageNo == 1){
					$$('#nav_bar_title').html(res.pageData.list[0].cat_name);
				}
				
				var shtml = '';
				for (var i = 0; i < res.pageData.list.length; i++) {
					var jdata = res.pageData.list[i];
					shtml += getTemplateHtml(jdata);
				}
				$$('#ul_list_articles').append(shtml);
				
			}
			if (cur_pageNo>=cur_pageCount){
				$$('.infinite-scroll-preloader').hide();
				$$('#ul_list_articles').append('<li style="text-align: center;margin:10px;">没有更多数据了！</li>');
			}
		});
	}
	
	function getTemplateHtml(jdata){
		var shtml = '<li class="card">';
		if (!isBlank(jdata.list_pic_url)){
			shtml += `
						<div class="align-items-flex-end">
							<a class="link external article-title-color" href="/front/teacher/article/detaile?id=${jdata.article_id}"><img style="height:200px" src="${getZoomFileUrlwh(jdata.list_pic_url, 394, 120)}"></a>
							
						</div>
					`;
		}
		shtml += `
						<div class="card-content card-content-padding">
							<p><a class="link external article-title-color" style="margin-top:5px; font-size:16px" href="/front/teacher/article/detaile?id=${jdata.article_id}">${jdata.article_title}</a>
							</p>
						</div>
					</li>
				`;
		return shtml;
	}

	getPage(1);
</script>
#end